<template>
  <view>
    <!-- tabs -->
    <u-tabs :list="list" :is-scroll="false" :current="current" @change="change">
    </u-tabs>
    <!-- tabs -->
    <!-- 切换页面 -->
    <!-- <view v-if="current==0">0</view>
    <view v-if="current==1">1</view>
    <view v-if="current==2">2</view> -->
    <!-- 切换页面 -->
    <!-- 通过循环list切换页面 -->
    <view v-for="(item, index) in list" :key="index">
      <block v-if="current === index">
        <!-- 页面数据 -->
        <navigator
          class="con"
          v-for="item1 in goods"
          :key="item1.goods_id"
          :url='"/pages/goods_detail/goods_detail?goods_id="+item1.goods_id'
        >
          <!-- 左侧 -->
          <u-row>
            <u-col span="4">
              <view class="left">
                <u-image
                  :src="item1.goods_small_logo"
                  width="191rpx"
                  height="191rpx"
                >
                </u-image>
              </view>
            </u-col>
            <u-col span="8">
              <view class="right">
                <view>
                  {{ item1.goods_name }}
                </view>
                <view class="price">
                  {{ item1.goods_price }}
                </view>
              </view>
            </u-col>
          </u-row>
        </navigator>

        <!-- 页面数据 -->
      </block>
    </view>
  </view>
</template>

<script>
export default {
  //监听下拉刷新的动作
  onPullDownRefresh() {
    //返回首页
    this.params.pagenum = 1;
    //清空列表数据
    this.goods = [];
    //重新渲染数据
    this.getListData();
    //关闭下拉窗
    uni.stopPullDownRefresh();
  },

  //上拉触底触发的事件
  onReachBottom() {
    //判断是否还有新数据可以获取 没有就提示 根据总数据长度与数组长度对比

    if (this.goods.length < this.total) {
      //重新获取数据 页码加一 获取请求
      this.params.pagenum++;
      //将数据拼接
      const res = this.getListData();
    } else {
      //提示没有数据可以下拉了
      uni.showToast({
        title: "没有更多数据了~",
        icon: "none",
      });
    }
  },
  //可以接收到路径数据
  onLoad({ cid }) {
    console.log(cid);
    cid = cid || 6;
    //定义全部变量存放接口数据
    this.params = {
      query: "",
      cid: cid,
      pagenum: 1,
      pagesize: 10,
    };

    this.getListData();
  },
  data() {
    return {
      list: [
        {
          name: "综合",
        },
        {
          name: "销量",
        },
        {
          name: "价格",
        },
      ],
      current: 0,
      goods: [],
      total: 0,
    };
  },
  methods: {
    change(index) {
      this.current = index;
      console.log(this.current);
    },
    async getListData() {
      const res = await this.$u.http.get("/goods/search", this.params);
      console.log(res);
      this.goods = [...this.goods, ...res.goods];
      this.total = res.total;
    },
  },
};
</script>

<style>
.con {
  display: flex;
  margin-bottom: 40rpx;
}
.right {
  display: flex;
  flex-direction: column;
  height: 191rpx;
  justify-content: space-between;
}
.left {
  margin-left: 20rpx;
}
.price {
  color: crimson;
}
</style>